import React from 'react';
import { useState, useEffect, memo } from 'react';
import axios from 'axios';

// 在函数组件中使用纯组件, 只有该组件自身的state 数据或接收的父组件的props 发生变化,
// 当前纯组件才会重新渲染, 否则不渲染

// 如何让一个函数组件变成纯组件
// 使用memo 这个高级组件函数, 包裹函数组件, 那么函数组件就变成了纯组件了
// 语法: memo (函数组件)


const Child = () => {
    // 定义关键字变量
    const [keyword, setkeyword] = useState('')
    const [list, setlist] = useState([]);
    // 请求数据列表
    useEffect(() => {
        axios.get('https://api.i-lynn.cn/college').then(res => {
            // console.log(res);
            setlist(res.data.data.list1)
        })
    }, [])

    const getfilterlist = () => {
        console.log('我筛选了');
        return list.filter(item => item.school_name.includes(keyword))
    };

    return (
        <div>
            <p>
                {/* 函数组件实现受控组件 */}
                <input type='text' value={keyword} onChange={(e) => {
                    setkeyword(e.target.value)
                }} />
            </p>
            {/* 搜索的列表展示 */}
            <ul>
                {
                    getfilterlist().map(item => <li key={item.id}>{item.school_name}</li>)
                }
            </ul>
        </div>
    );
}

export default memo(Child);
